<template>
  <div class="menu-box">
    <el-menu
      style="width: 200px;min-height: 100%;"
      :default-active="route.path"
      router
      active-text-color="#1677ff"
      background-color="#FFFFFF"
      class="el-menu-vertical-demo"
      text-color="#000000"
      :default-openeds="[0]"
    >
      <el-sub-menu :index="index" v-for="(item, index) in menuList" :key="index">
        <template #title>
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item :index="children.path" v-for="(children, childrenIndex) in item.children">
          <span>{{ children.name }}</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import db, {MENU_KEY} from "@/utils/db";

const route = useRoute();

const menuList = ref<any[]>([]);

onMounted(() => {
  initData();
});

const initData = async () => {
  menuList.value = db.getObj(MENU_KEY);
}

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style scoped lang="less">
@import "./index.less";
</style>